<template>
  <div class="person">
    <h1>中国</h1>
    <h2 ref="title2">sicuan</h2>
    <h3>chongqin</h3>
    <button @click="showLog">点我输出h2这个元素</button>
  </div>
</template>

<script setup lang="ts" name="Person">
  import { ref, defineExpose } from 'vue'

  //创建一个title2，用于存储ref标记的内容
  let title2 = ref()
  let a = ref(1)
  function showLog() {
    console.log(title2.value)
  }
  //普通html标签，可以获取到DOM对象
  //可以给App组件中 给person组件添加ref属性，得到的是person组件实例对象。
  // 但是父组件无法获取person组件内部的属性，所以需要用defineExpose暴露给父组件
  defineExpose({
    a
  })
</script>

<style scoped>
.person {
    /* 背景颜色 */
    background-color: skyblue;
    /* 阴影 */
    box-shadow: 0 0px 10px;
    /* 圆角 */
    border-radius: 4px;
    padding: 20px; /* 内边距 */
}
button { 
    margin: 0 5px;
}
</style>


